<template>
  <el-table-column
    :width="width"
    :key="Math.random()"
    :align="align || 'center'"
    :show-overflow-tooltip="showOverflowTooltip"
    :label="label"
  >
    <template #default="scope">
      <div style="display: flex" :style="flexStyle">
        <template v-for="(b, i) in buttons" :key="i">
          <component
            :is="ST_COLLECTION[getButtonType(b)]"
            :column-button="b"
            :scope="scope"
          />
        </template>
      </div>
    </template>
  </el-table-column>
</template>

<script lang="ts" setup name="lc-st-index">
import { ITableColumn, ITableColumnButton } from "../interface";
import { ST_COLLECTION } from "../index";
import { computed } from "vue";
const props = defineProps<ITableColumn<Record<string, any>>>();
const getButtonType = (b: ITableColumnButton) => {
  return b?.children?.length ? "dropdown" : "button";
};
const flexStyle = computed(() => {
  return {
    alignItems: "center",
    justifyContent:
      props.align === "right"
        ? "left"
        : props.align === "left"
        ? "right"
        : props.align || "center"
  };
});
</script>
../interface ../interface
